<template>
  <el-drawer
    v-model="visible"
    size="800px"
    class="performance-drawer"
    title="团队业绩详情"
  >
    <div class="drawer-custom-body">
      <!-- KPI 概览 -->
      <div class="kpi-grid">
        <div class="kpi-card" v-for="kpi in kpis" :key="kpi.label">
          <div class="label">{{ kpi.label }}</div>
          <div class="value">{{ kpi.value }}</div>
        </div>
      </div>

      <!-- 完成率环形图 -->
      <div class="chart-container">
        <v-chart :option="chartOption" autoresize style="height: 200px" />
      </div>

      <!-- 成员详情排行榜 -->
      <div class="member-list-title">
        <img src="~@/assets/images/rank.png" alt="" srcset="" />
        <span>业绩排行榜</span>
      </div>
      <div class="member-list">
        <div
          v-for="(member, idx) in teamMembers"
          :key="member.id"
          class="member-row"
        >
          <div class="rank">{{ idx + 1 <= 3 ? medals[idx] : idx + 1 }}</div>
          <el-avatar :src="member.avatar" size="44" />
          <div class="info">
            <div class="name">{{ member.name }}</div>
            <el-progress
              :percentage="member.progress"
              :color="
                member.progress >= 100
                  ? gradientGreen.color
                  : gradientBlue.color
              "
              :stroke-width="16"
              :show-text="false"
            />
          </div>
          <div class="amount">￥{{ member.completed.toLocaleString() }}</div>
          <div class="percent">{{ member.progress }}%</div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import VChart from "vue-echarts";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

// 注册 echarts 模块
echarts.use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

// 抽屉控制
const visible = ref(false);

// mock 数据
const team = ref({ name: "销售一组" });
const month = ref("2025-08");
const teamMembers = ref([
  { id: 1, name: "张三", avatar: "", completed: 520000, progress: 130 },
  { id: 2, name: "李四", avatar: "", completed: 480000, progress: 120 },
  { id: 3, name: "王五", avatar: "", completed: 450000, progress: 110 },
  { id: 4, name: "赵六", avatar: "", completed: 400000, progress: 100 },
  { id: 5, name: "钱七", avatar: "", completed: 360000, progress: 90 },
  { id: 6, name: "孙八", avatar: "", completed: 340000, progress: 85 },
  { id: 7, name: "周九", avatar: "", completed: 320000, progress: 80 },
  { id: 8, name: "吴十", avatar: "", completed: 300000, progress: 75 },
  { id: 9, name: "郑一", avatar: "", completed: 280000, progress: 70 },
  { id: 10, name: "王二", avatar: "", completed: 260000, progress: 65 },
  { id: 11, name: "冯三", avatar: "", completed: 240000, progress: 60 },
  { id: 12, name: "陈四", avatar: "", completed: 220000, progress: 55 },
  { id: 13, name: "褚五", avatar: "", completed: 200000, progress: 50 },
  { id: 14, name: "卫六", avatar: "", completed: 180000, progress: 45 },
  { id: 15, name: "蒋七", avatar: "", completed: 160000, progress: 40 },
  { id: 16, name: "沈八", avatar: "", completed: 140000, progress: 35 },
  { id: 17, name: "韩九", avatar: "", completed: 120000, progress: 30 },
  { id: 18, name: "杨十", avatar: "", completed: 100000, progress: 25 },
  { id: 19, name: "朱一", avatar: "", completed: 80000, progress: 20 },
  { id: 20, name: "秦二", avatar: "", completed: 60000, progress: 15 },
]);

// KPI 数据
const totalTarget = computed(() =>
  teamMembers.value.reduce((s, m) => s + m.completed, 0)
);
const avgTarget = computed(() => totalTarget.value / teamMembers.value.length);

const kpis = computed(() => [
  { label: "团队", value: team.value.name },
  { label: "月份", value: month.value },
  { label: "总业绩", value: `￥${totalTarget.value.toLocaleString()}` },
  { label: "人均业绩", value: `￥${avgTarget.value.toLocaleString()}` },
]);

// 环形图 option
const chartOption = computed(() => ({
  tooltip: { trigger: "item" },
  series: [
    {
      type: "pie",
      radius: ["60%", "80%"],
      label: {
        show: true,
        position: "center",
        formatter: "{d}%",
        fontSize: 20,
        fontWeight: "bold",
      },
      data: [
        {
          value: teamMembers.value.filter((m) => m.progress >= 100).length,
          name: "已完成",
        },
        {
          value: teamMembers.value.filter((m) => m.progress < 100).length,
          name: "未完成",
        },
      ],
    },
  ],
}));

// 进度条渐变色
const gradientGreen = {
  color: "linear-gradient(90deg, #67C23A 0%, #95E06C 100%)",
};
const gradientBlue = {
  color: "linear-gradient(90deg, #409EFF 0%, #6EB5FF 100%)",
};

// 排行前三名徽章
const medals = ["🥇", "🥈", "🥉"];

// 父组件调用
function show(teamId: number, selectedMonth: string) {
  month.value = selectedMonth;
  // TODO: 替换为接口请求
  visible.value = true;
}

defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
/* ====== 主题变量 ====== */
$primary: #409eff; // 主色 蓝
$success: #67c23a; // 成功色 绿
$bg-light: #f5f7fa;
$card-bg: #ffffff;
$card-muted-bg: #f0f2f5; // KPI 背景灰
$text-main: #333;
$text-muted: #666;
$border-light: #e6e8eb;

/* ====== 抽屉背景 ====== */
.performance-drawer {
  background: $bg-light;
  padding: 12px;
}
.drawer-custom-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

/* ====== KPI 区 ====== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: $card-muted-bg;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  border: 1px solid $border-light;

  .label {
    font-size: 13px;
    color: $text-muted;
  }
  .value {
    font-size: 18px;
    font-weight: 600;
    margin-top: 6px;
    color: $text-main;
  }
}

/* ====== 环形图容器 ====== */
.chart-container {
  background: $card-bg;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid $border-light;
}

/* ====== 成员列表 ====== */
.member-list-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: $text-main;
  display: flex;
  align-items: flex-end;

  img {
    width: 35px;
    margin-bottom: -5px;
  }

  span {
    margin-left: 8px;
  }
}
.member-list {
  flex: 1;
  background: $card-bg;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid $border-light;
  overflow-y: auto;

  // 滚动条样式美化（可选）
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
  }
}

.member-row {
  display: grid;
  grid-template-columns: 40px 50px 1fr 120px 60px;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid $border-light;

  &:last-child {
    border-bottom: none;
  }
}

.info {
  flex: 1;
}

.name {
  font-weight: 600;
  margin-bottom: 6px;
  color: $text-main;
}

.amount {
  font-weight: 600;
  color: $primary;
  text-align: right;
}

.percent {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: $text-muted;
}

.rank {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: $primary;
}
</style>
